<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css" />
		<link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css" />
		<link rel="stylesheet" type="text/css" href="../easyui/demo/demo.css" />
		<script src="../easyui/jquery.min.js" type="text/javascript" charset="utf-8"></script>

		<script src="../easyui/jquery.easyui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.serializejson.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
	
		<table id="dg">
			Search:<input type="text" id="Search"><button id="But">Search</button>
		</table>
		
		<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:260px;padding:10px">

			<form id="ff" method="post">
				<div style="margin-bottom:20px">
					<input class="easyui-textbox" name="name" style="width:100%" data-options="label:'用户名:',required:true">
				</div>
				<div style="margin-bottom:20px">

					<input class="easyui-textbox" name="password" style="width:100%;margin-bottom:20px" data-options="label:'密&nbsp;&nbsp;码&nbsp;:',required:true">
				</div>
				<div style="margin-bottom:20px">

					<input class="easyui-textbox" name="_id" style="width:100%;margin-bottom:20px" data-options="label:'_I&nbsp;&nbsp;d&nbsp;:'">
				</div>

			</form>
			<div style="text-align:center;padding:5px 0">
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清除</a>
				<a href="javascript:void(0)" class="easyui-linkbutton" onclick="removetForm()" style="width:80px">删除</a>
			</div>
		</div>

		<div style="margin:20px 0;">
			<a href="#" class="easyui-linkbutton" onclick="show()">Show</a>
			<a href="#" class="easyui-linkbutton" onclick="slide()">Slide</a>

		</div>
	
		<style type="text/css">
			.opt {
				text-decoration: none;
				color: #333;
				display: inline-block;
				padding-left: 19px;
				width: 32px;
				line-height: 25px;
				background: url('../easyui/themes/icons/pencil.png') no-repeat left;
			}
			
			#tan {
				width: 100px;
				height: 62px;
				border: 1px solid yellow;
				position: fixed;
				left: 50%;
				margin-left: -50px;
				top: 50%;
				margin-top: -31px;
				text-align: center;
				padding-top: 10px;
			}
			
			#tan button {
				position: absolute;
				bottom: 5px;
			}
		</style>
		<div id="tan" style="display: none;">
			是否删除
			<button style="left: 5px;">确定</button>
			<button style="right: 5px;">取消</button>
		</div>
		<script type="text/javascript">
			function submitForm() {
				$('#ff').form('submit', {
					onSubmit: function() {
						if($(this).form('enableValidation').form('validate')) {
							var data = $('#ff').serializeObject();

							if(data._id && data._id.trim().length > 0) {
								$.ajax({
									type: "put",
									url: 'http://localhost:3000/users/data/' + data._id,
									data: data
								}).done(function(res) {
									$('#dlg').dialog('close')
									$('#dg').datagrid('reload');
								});

							} else {

								delete data._id;

								$.ajax({
									type: "post",
									url: 'http://localhost:3000/users/data',
									data: data
								}).done(function(res) {
									$('#dlg').dialog('close')
									$('#dg').datagrid('reload');
								});
							}
						} else {
							$.messager.show({
								title: '信息提示',
								msg: '添加用户失败',
								showType: 'show'
							});
						}

					}
				});
			}

			function clearForm() {
				$('#ff').form('clear');
			}

			var toolbar = [{
				text: 'Add',
				iconCls: 'icon-add',
				handler: function() {
					$('#dlg').dialog('open')
				}
			}, {
				text: '删除',
				iconCls: 'icon-cut',
				handler: function() {
					$('#tan').css('display', 'block');
					$('#tan button').eq(0).on('click', function() {
						var gss = $("#dg").datagrid('getSelections');
						var ids = [];
						for(var i = 0; i < gss.length; i++) {
							ids.push(gss[i]._id);
						}

						$.ajax({
							url: 'http://localhost:3000/users/deletes',
							method: 'post',
							data: {
								ids: ids.toString()
							}
						}).done(function(res) {

							if(res.status === 200) {
								$.messager.show({
									title: '信息提示',
									msg: '删除数据成功',
									showType: 'show'
								});
							} else {
								$.messager.show({
									title: '信息提示',
									msg: '请选择要删除的数据',
									showType: 'show'
								});
							}
							$("#dg").datagrid("reload");
						})
						$('#tan').css('display', 'none');
					})
					$('#tan button').eq(1).on('click', function() {
						$('#tan').css('display', 'none');
					})
					//          	var gss = $("#dg").datagrid('getSelections');
					//          	var ids = [];
					//          	for(var i=0;i<gss.length;i++){
					//          		ids.push(gss[i]._id);
					//          	}
					//
					//
					//          	$.ajax({
					//          		url:'http://localhost:3000/users/deletes',
					//          		method:'post',
					//          		data: {ids: ids.toString()}
					//          	}).done(function(res){
					//          		
					//          		if(res.status === 200){
					//          			$.messager.show({
					//				                title:'信息提示',
					//				                msg:'删除数据成功',
					//				                showType:'show'
					//				            });
					//          		}else{
					//          			$.messager.show({
					//				                title:'信息提示',
					//				                msg:'请选择要删除的数据',
					//				                showType:'show'
					//				            });
					//          		}
					//          		$("#dg").datagrid("reload");
					//          	})

				}
			}, '-', {
				text: 'Save',
				iconCls: 'icon-save',
				handler: function() {
					alert('save')
				}
			}];

			$('#dg').datagrid({
				toolbar: toolbar,
				pagination: true,
				fit: true,

				method: 'post',
				url: 'http://localhost:3000/users/list',
				columns: [
					[{
							field: 'ck',
							checkbox: true
						},
						{
							field: '_id',
							title: 'ID',
							width: 100
						},
						{
							field: 'name',
							title: '用户名',
							width: 100
						},
						{
							field: 'opt',
							title: '操作',
							width: 100,
							formatter: function(value, row, index) {
								return '<a href="javascript:void(0)" class="opt" onclick="app(\'' + row._id + '\')">修改</a> ' +
									'<a href="javascript:void(0)" class="opt shanchu" onclick="deleUser(\'' + row._id + '\')">删除</a>';
							}
						}

					]
				],
				onDblClickRow(index,row) {
					edidData(row)
				}
			});

			function edidData(row) {
				$('#dlg').dialog('open');
				$('#ff').form('load', row);

			}

			function deleUser(row) {
				$('#tan').css('display', 'block');
				$('#tan button').eq(0).on('click', function() {
					$.ajax({
						url: 'http://localhost:3000/users/deletes',
						method: 'post',
						data: {
							ids: row
						}
					}).done(function(res) {

						if(res.status === 200) {
							$.messager.show({
								title: '信息提示',
								msg: '删除数据成功',
								showType: 'show'
							});
						} else {
							$.messager.show({
								title: '信息提示',
								msg: '请选择要删除的数据',
								showType: 'show'
							});
						}
						$("#dg").datagrid("reload");
					})

					$('#tan').css('display', 'none');
				})
				$('#tan button').eq(1).on('click', function() {
					$('#tan').css('display', 'none');
				})
				//				if(tamml){
				//					$.ajax({
				//	            		url:'http://localhost:3000/users/deletes',
				//	            		method:'post',
				//	            		data: {ids: row}
				//	            	}).done(function(res){
				//	            		
				//	            		if(res.status === 200){
				//	            			$.messager.show({
				//					                title:'信息提示',
				//					                msg:'删除数据成功',
				//					                showType:'show'
				//					            });
				//	            		}else{
				//	            			$.messager.show({
				//					                title:'信息提示',
				//					                msg:'请选择要删除的数据',
				//					                showType:'show'
				//					            });
				//	            		}
				//	            		$("#dg").datagrid("reload");
				//	            	})
				//				}

			}

			function app(row) {
				console.log(row);

				$.ajax({
					type: "put",
					url: "http://localhost:3000/users/data/" + row
				}).done(function(row) {
					$('#ff').form('load', row);
				});
				edidData();
			}


			// $('#But').on('click',function(){
			// 	var name=$('#Search').val();

				
			// 	$.ajax({
			// 		method: "post",
			// 		url: "http://localhost:3000/users/list",
			// 		data:{name:name}
			// 	}).done(function(res) {
			// 		$('#dg').datagrid('loadData',res);


			// 	});

				$('#But').click(function(){
		            var name = $('#Search').val();
		             
		             $.ajax({
		                method:'post',
		                url:'http://localhost:3000/users/list',
		                data:{name:name}
		             }).done(function(res){
		                // console.log(res);
		                $('#dg').datagrid('loadData',res);
		             })
		        })































			


		</script>
	</body>

</html>